<template>
    <div class="userInfo mt-20px">
        <div class="userInfo-top flex justify-between">
            <el-button 
                class="ml-10px" 
                type="primary"
                @click="btnClick"
                >
                新增
            </el-button>
            <div class="flex w400px">
                <span class=" font-size-14px line-height-30px mr-10px">请输入</span>
                <el-input placeholder="请输入用户名" class="w200px" v-model="inputBox"></el-input>
                <el-button class="ml-10px" type="primary" @click="Search">搜索</el-button>
            </div>
        </div>
        <div>
            <newAdd @refreshPage="handleReceive"></newAdd>
        </div>
        <div class="mt-15px ml-10px">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="用户编号" align="center" width="100px">
                    <template #default="{ $index}">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="100px" align="center"/>
                <el-table-column prop="age" label="年龄" width="100px" align="center"/>
                <el-table-column prop="sex" label="性别" width="100px" align="center"/>
                <el-table-column prop="birthDate" label="出生日期" width="250px" align="center" >
                    <template #default="{row}">
                        {{ dayjs(row.birthDate).format('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址" width="250px" align="center"/>
                <el-table-column  label="操作" align="center" width="250px">
                    <template #default ="{row}">
                        <el-button @click="btnAmend(row)">编辑</el-button>
                        <el-button @click="isDelTableData(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <compile :tableRow="tableRowData"></compile>
            </div>
            <el-pagination 
                layout="prev, pager, next, total, jumper, sizes" 
                :total="tableDataTotal" 
                background
                :page-sizes="[7,14,21,28]"
                v-model:page-size="limit"
                v-model:current-page="page"
                @change = "handlePage"
                class="float-right mr-20px"
            />
        </div>
    </div>
</template>
<script setup>
import {getTableData, delTableData, inputSearch } from '@/api/userManage.js'
import { ref, onMounted } from 'vue'
import newAdd from './newAdd/newAdd.vue'
import compile from './newAdd/compile.vue'
import { useStore , } from 'vuex'
import {dayjs, ElMessage, ElMessageBox } from 'element-plus'
const store = useStore()
onMounted(()=>{
    gainTableInfo()
})

//获取表格数据
const tableData = ref([])
const tableDataTotal = ref()
const limit = ref(7)
const page = ref(1)
const gainTableInfo = ()=>{
    getTableData({page: page.value ,limit: limit.value} ).then(res=>{
        tableData.value = res.data.data.data
        tableDataTotal.value = res.data.data.info
    })
}
//表格翻页
const handlePage = (currentPage , pageSize)=>{
    limit.value = pageSize
    page.value = currentPage
    gainTableInfo()
}
//删除表格数据
const isDelTableData = async (id) => {
        ElMessageBox.confirm('请确认是否删除', '删除弹框', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }).then(async()=>{
            const res = await delTableData({id})
            if (res.data.success) {
                ElMessage.success({ message: '删除成功' });
                gainTableInfo();  
            }
        }).catch(()=>{
            ElMessage.info({ message: '已取消删除' }); 
        })
}
//接收子组件传过来的函数
const handleReceive = (e)=>{
    console.log(e)
    gainTableInfo()
}
//更改vuex里面是否打开对话框的状态state的状态
const btnClick = ()=>{
    store.commit('userManage/newTableData',true)
}
//编辑操作
const tableRowData = ref({})
const btnAmend = (rowData)=>{
    store.commit('userManage/amendInfo',true)
    tableRowData.value = rowData
}
//搜素框
const inputBox = ref()
const Search =async ()=>{
    if(!inputBox.value) {
        gainTableInfo()
        return ElMessage.warning('输入框不能为空')
    }
    const res = await inputSearch({name:inputBox.value})
    if(res.data.info === []){
        return ElMessage.warning('没有找到数据')
    }else{
        tableData.value = res.data.info
    }
}
</script>